<template>
  <div class="Procurement">
    <div style="font-size: 30px; margin-bottom: 50px">采购信息</div>
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-width="120px"
      label-position="left"
      style="width: 900px"
    >
      <el-form-item label="部门" prop="department">
        <el-input v-model="form.department" placeholder="请输入部门"></el-input>
      </el-form-item>
      <el-form-item label="发起人" prop="sponsor">
        <el-input v-model="form.sponsor" placeholder="请输入发起人"></el-input>
      </el-form-item>
      <el-form-item label="物料名称" prop="material">
        <el-input
          v-model="form.material"
          placeholder="请输入物料名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="数量" prop="num">
        <el-input
          v-model="form.num"
          type="number"
          placeholder="请输入数量"
        ></el-input>
      </el-form-item>
      <el-form-item label="单价" prop="price">
        <el-input
          v-model="form.price"
          type="number"
          placeholder="请输入单价"
        ></el-input>
      </el-form-item>
      <el-form-item label="总金额" prop="amount">
        <el-input
          v-model="form.amount"
          type="number"
          placeholder="请输入总金额"
        ></el-input>
      </el-form-item>
      <el-form-item label="申请日期" prop="launch_date">
        <el-date-picker
          v-model="form.launch_date"
          type="date"
          placeholder="选择申请日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="采购日期" prop="purchase_date">
        <el-date-picker
          v-model="form.purchase_date"
          type="date"
          placeholder="选择采购日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <div id="demo1" v-loading="false"></div>
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="loading"
          type="primary"
          size="default"
          style="margin-top: 50px"
          @click="onCreation('form')"
          >{{ form.id ? "修 改" : "新 建" }}</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  uploadHomeApiupload,
  postApiadministrationedit,
  postApiadministrationlook,
} from "@/api";
import wangEditor from "wangeditor";
export default {
  data() {
    return {
      loading: false,
      editor: null,
      editorData: "",
      form: {
        department: "", //部门
        sponsor: "", //发起人
        material: "", //物料名称
        num: "", // 数量
        price: "", // 单价
        amount: "", // 总金额
        launch_date: "", //申请日期
        purchase_date: "", //采购日期
        remarks: "", //富文本编辑内容
      },
      rules: {
        department: [
          { required: true, message: "请输入部门", trigger: "blur" },
        ],
        sponsor: [{ required: true, message: "请输入发起人", trigger: "blur" }],
        material: [
          { required: true, message: "请输入物料名称", trigger: "blur" },
        ],
        num: [{ required: true, message: "请输入数量", trigger: "blur" }],
        price: [{ required: true, message: "请输入单价", trigger: "blur" }],
        amount: [{ required: true, message: "请输入总金额", trigger: "blur" }],
        launch_date: [
          { required: true, message: "请选择申请日期", trigger: "blur" },
        ],
        purchase_date: [
          { required: true, message: "请选择采购日期", trigger: "blur" },
        ],
      },
    };
  },

  activated() {
    this.editorConfig();
    console.log("this.$route.query.id", this.$route.query.id);
    if (this.$route.query.id != undefined) {
      postApiadministrationlook(this.$route.query.id).then((res) => {
        console.log("采购详情--->", res);
        this.form = res.data;
        this.editor.txt.html(this.form.remarks);
      });
    }
  },
  methods: {
    editorConfig() {
      const editor = new wangEditor(`#demo1`);
      // 配置 onchange 回调函数，将数据同步到 vue 中
      editor.config.onchange = (newHtml) => {
        this.form.remarks = newHtml;
      };
      //   editor.config.uploadImgServer =  process.env.VUE_APP_URL + '/index.php/Home/Api/upload'
      editor.config.customUploadImg = async function (
        resultFiles,
        insertImgFn
      ) {
        // resultFiles 是 input 中选中的文件列表
        // insertImgFn 是获取图片 url 后，插入到编辑器的方法
        for (let index = 0; index < resultFiles.length; index++) {
          await uploadHomeApiupload(resultFiles[index]).then((res) => {
            console.log(res);
            insertImgFn(res.img);
          });
        }
        // 上传图片，返回结果，将图片插入到编辑器中
        // insertImgFn(imgUrl)
      };
      // 创建编辑器
      editor.create();
      this.editor = editor;
    },
    // 负责人列表
    postApigetdesigner() {
      let data = {
        type: 0,
      };
      postApigetdesigner(data).then((res) => {
        this.principalList = res.data;
      });
    },
    //  创建套装
    onCreation(formName) {
      this.loading = true;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let form = this.form;
          postApiadministrationedit(form)
            .then((res) => {
              this.loading = false;
              if (form.id) {
                this.$message.success("修改采购成功");
              } else {
                this.$message.success("采购录入成功");
              }
              this.$router.go(-1);
            })
            .catch((err) => {
              this.loading = false;
              this.$message.success(err.msg);
            });
        } else {
          this.loading = false;
          this.$message.warning("请填写完整信息");
          return false;
        }
      });
    },
    // 形制列表
    postApigetdynasty() {
      postApigetdynasty().then((res) => {
        console.log("形制列表", res);
        this.shapeAndStructureList = res.data;
      });
    },
    // 品类列表
    postApigetcategory() {
      postApigetcategory().then((res) => {
        console.log("品类列表", res);
        this.categoryList = res.data;
      });
    },
    // 企划列表
    async postApigetplanning() {
      await postApigetplanning().then((res) => {
        console.log("套装列表", res);
        this.layoutList = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.Procurement {
  @include global-back;
  /deep/ .el-input {
    width: 400px;
  }
  /deep/ .w-e-toolbar {
    z-index: 11 !important;
  }
  /deep/ .w-e-text-container {
    z-index: 10 !important;
  }
}
</style>